<script setup lang="ts">
import { type IProps } from './props';
import { type IEmits } from './emits';
import CloseIcon from '@/components/icon/Close.vue';
import { nextTick } from 'vue';

const props = withDefaults(defineProps<IProps>(), {
  width: 320,
  height: 280,
  title: '提示',
  maskClosable: true,
  showCancel: false,
  showConfirm: true,
});

const emits = defineEmits<IEmits>();

const show = defineModel('show', {
  required: true,
  default: false,
  type: Boolean,
});

nextTick(() => {
  if (props.beforeOpen && props.beforeOpen instanceof Function) {
    props.beforeOpen();
  }
});
</script>

<template>
  <div v-if="show" class="modal fixed inset-0 m-auto z-[999]">
    <!-- 遮罩 -->
    <div class="modal-mask absolute inset-0 m-auto bg-slate-500 opacity-25" @click="() => {
      if (maskClosable) {
        if (
          showCancel &&
          beforeCancel &&
          typeof beforeCancel === 'function'
        ) {
          if (!beforeCancel()) {
            return;
          }
        } else if (
          showConfirm &&
          beforeConfirm &&
          typeof beforeConfirm === 'function'
        ) {
          if (!beforeConfirm()) {
            return;
          }
        }
        show = false;
        emits('cancel');
      }
    }
      " />

    <!-- 内容 -->
    <div :style="{ width: `${width}px`, height: `${height}px` }" :class="[
      'modal-content',
      'absolute',
      'flex',
      'flex-col',
      'inset-0',
      'm-auto',
      'p-4',
      'bg-white',
      'shadow',
      'rounded-md',
    ]">
      <div class="modal-content__header flex flex-row items-center justify-between h-[40px]">
        <div class="text-lg">
          <slot name="title">
            {{ title }}
          </slot>
        </div>
        <div>
          <button class="outline-none text-[20px] flex items-center justify-center" @click="show = false">
            <CloseIcon />
          </button>
        </div>
      </div>
      <div class="modal-content__body p-2 flex-1">
        <slot>
          <div class="p-5 text-center">{{ content }}</div>
        </slot>
      </div>
      <div
        class="modal-content__footer border-t border-gray-100 h-fil pt-4 flex flex-row items-center justify-end gap-2">
        <slot name="footer p">
          <button v-if="showCancel" class="px-4 py-1 bg-gray-200 text-black hover:bg-gray-300 rounded-sm" @click="() => {
            if (
              beforeCancel &&
              typeof beforeCancel === 'function'
            ) {
              if (!beforeCancel()) {
                return;
              }
            }
            show = false;
            emits('cancel');
          }
            ">
            取消
          </button>
          <button v-if="showConfirm" class="px-4 py-1 bg-orange-500 text-white hover:bg-orange-600 rounded-sm" @click="() => {
            if (
              beforeConfirm &&
              typeof beforeConfirm === 'function'
            ) {
              if (!beforeConfirm()) {
                return;
              }
            }
            emits('confirm');
          }
            ">
            确定
          </button>
        </slot>
      </div>
    </div>
  </div>
</template>
